<template>
  <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
export default {
  name: '',
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data: () => ({}),
  mounted() {
    setTimeout( () => {
      this.drawChart();
    }, 1000)
  },
  watch: {
    data () {
      console.log('data',this.data);
      this.drawChart();
    }
  },
  methods: {
    drawChart() {
      const {myChart} = this.$refs;
      if (myChart) {
        const thisChart = this.$echarts.init(myChart);
        const option = {
          grid: {
            top: this.data.position[0],
            left: this.data.position[1],
            right: this.data.position[2],
            bottom: this.data.position[3],
          },
          tooltip: {
            show : true,
            //symbol: "none", //去掉圆点
            trigger: 'axis',
            backgroundColor: "rgba(255,255,255,0.85)", //设置背景图片 rgba格式
            color: "black",
            borderWidth: "1", //边框宽度设置1
            borderColor: "gray", //设置边框颜色
            textStyle: {
              color: "black" //设置文字颜色
            },
          },
          title: {
            text: this.data.title,
            textStyle: {
              color: '#4EB2F2',
              fontSize: 12,
              fontWeight:100
            },
            top: 0,
            left: this.data.position[1],
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: false,
              alignWithLabel: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              // interval: 0, //显示所有X轴信息
              // rotate: 50, //x轴文字倾斜角度
              color: '#069DFD',
            },
            data: this.data?.lineX,
          },
          yAxis: {
            type: 'value',
            boundaryGap: [0, '85%'],
            axisLine: {
              show: true,
              lineStyle: {
                color: '#069DFD',
                width: 0.1,
              },
            },
            axisLabel: {
              color: '#069DFD',
            },
            splitLine: {
              lineStyle: {
                color: '#069DFD',
                width: 0.1,
              },
            },
          },
          series: [{
            data: this.data?.lineY,
            type: 'line',
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0,189,217,0.4)'
              }, {
                offset: 1,
                color: 'rgba(8,16,58,0.5)'
              }])
            },
            lineStyle: {
              color: '#00FFFF',
            },
          }],
        };
        thisChart.setOption(option);
        window.addEventListener('resize', () => {
          thisChart.resize();
        })
      }
    },
  },
};
</script>
<style lang="less" scoped>

</style>
